<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工信息表</title>
    <style>
        .clearfix:before,
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }

        article {
            width: 60%;
            margin: 0 auto;
        }

        article .search {
            background-color: #fff;
            font-size: 16px;
            color: #3e3e3e;
            height: 40px;
            padding: 20px;
            margin-top: 10px;
            margin-bottom: 10px;
            line-height: 34px;
        }

        article .search input.btn {
            float: right;
            text-align: center;
            border-radius: 5px;
            border: none;
            color: white;
            outline: none;
            line-height: 15px;
            vertical-align: middle;
            background-color: rgb(4, 144, 247);
            width: 134px;
            height: 36px;
            cursor: pointer;
            font-size: 16px;
        }

        article .search input.btn:hover {
            background-color: rgb(25, 136, 218);
        }

        section {
            float: left;
            background-color: #fff;
            width: 70%;
        }

        article aside {
            float: right;
            width: 29%;
            background-color: #fff;
        }

    </style>
</head>
<body>
<article class="clearfix">
    <div class="search">
        <form action="/search">
            <label for="number">工号</label><span><input type="text" name="number" id="number"/></span>
            <label for="name">姓名</label><span><input type="text" name="name" id="name"/></span>
            <input type="submit" class="btn" value="查找"/>
        </form>
    </div>
    <section>员工名单</section>
    <aside>
        <p>常见问题</p>
        <p>
            已经签了合同，为什么公司的员工名单没有我？
        </p>
        <p>
            人事部偷懒了，扁负责人一顿就好(` _ `)
        </p>
    </aside>
</article>
</body>
</html>